<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-store">
    <meta http-equiv="Cache-Control" content="no-cache,no-store">
    <meta http-equiv="expires" content="0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>活动规则</title>
    <style media="screen" title="no_title">@charset "UTF-8";.clear:after{content:'';display:block;clear:both;width:0;height:0}body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0}ul,ol{list-style-type:none}select,input,img,select{vertical-align:middle}*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(255,255,255,0);font-family:PingFang SC,STHeiti,"Microsoft Yahei","微软雅黑",Helvetica,sans-serif;-webkit-touch-callout:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;outline:0}a:active,a:hover,a:link,a:visited{text-decoration:none;outline:0}ul,li{list-style:none}html,body{width:100%;font-size:20px;background-color:#f0f0f0}html,body{background-color:#fefbe9}body{background-color:#eb3839}.wrap{width:100%;min-height:100vh;background:url(./img/rulebg.png) no-repeat top center;background-size:100% auto;background-color:#eb3839}.wrap .rule-section{padding:5.05rem .65rem 0}.wrap .rule-section .title{width:100%;height:.875rem;background:url(./img/rule-title.png) no-repeat center;background-size:100% 100%;font-size:0}.wrap .rule-section .deadline{font-size:.5rem;color:#ffdba8;text-align:center;font-weight:500;margin-top:.1rem}.wrap .rule-section .rules{font-size:.65rem;line-height:.85rem;color:#ffdba8}.wrap .rule-section .rules li{position:relative;padding-top:.65rem;padding-bottom:.65rem;-webkit-box-orient:horizontal;-ms-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;-moz-flex-flow:row nowrap;flex-flow:row nowrap;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-justify-content:center;-webkit-justify-content:center;justify-content:center;-ms-justify:center;-webkit-justify:center;justify:center;-ms-box-align:center;-webkit-box-align:center;box-align:center;-ms-align-items:center;-webkit-align-items:center;align-items:center}.wrap .rule-section .rules li:after{text-align:left;content:'';display:block;width:2.7rem;height:.3rem;background:url(./img/border-line.png) no-repeat center;background-size:100%;position:absolute;bottom:.2rem;left:0}.wrap .rule-section .rules li i{font-size:.9rem;font-weight:700;font-style:italic;margin-right:.7rem}.wrap .rule-section .rules li p{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.wrap .prize-section{position:relative;margin-top:3.25rem;background-color:#fefbe9;padding:0 .65rem}.wrap .prize-section:before{text-align:left;content:'';display:block;width:100%;height:3.2rem;background:url(./img/cloud.png) no-repeat center;background-size:100% 100%;position:absolute;top:-3.175rem;left:0}.wrap .prize-section .title{width:100%;height:.875rem;background:url(./img/prize-title.png) no-repeat center;background-size:100% 100%;font-size:0;margin:.4rem 0}.wrap .prize-section .prizes{padding-top:.75rem;padding-bottom:1.5rem;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-ms-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;-moz-flex-flow:row wrap;flex-flow:row wrap}.wrap .prize-section .prizes li{width:50%;text-align:center;border-right:1px dashed #e9e3c1;border-bottom:1px dashed #e9e3c1;font-size:.6rem;color:#944d0f;padding-bottom:1rem;padding-top:1rem;position:relative}.wrap .prize-section .prizes li:first-child,.wrap .prize-section .prizes li:nth-child(2){padding-top:0}.wrap .prize-section .prizes li:nth-last-child(2),.wrap .prize-section .prizes li:nth-last-child(1){border-bottom:0;padding-bottom:0}.wrap .prize-section .prizes li:nth-child(even){border-right:0}.wrap .prize-section .prizes li:nth-child(even):not(:last-child):not(:nth-last-child(2)):before{content:'';display:inline-block;width:1.85rem;height:1.85rem;-webkit-border-radius:1.85rem;-moz-border-radius:1.85rem;-ms-border-radius:1.85rem;-o-border-radius:1.85rem;border-radius:1.85rem;position:absolute;left:-.925rem;bottom:-.925rem;background:url(./img/circle-icon.png) no-repeat center;background-size:35% 35%;background-color:#fefbe9;z-index:5}.wrap .prize-section .prizes li:nth-child(even):nth-last-child(2){border-bottom:1px dashed #e9e3c1!important}.wrap .prize-section .prizes li img,.wrap .prize-section .prizes li .img{width:3.3rem;height:3.3rem;display:block;margin:0 auto;background:#e9e3c1;-webkit-border-radius:.15rem;-moz-border-radius:.15rem;-ms-border-radius:.15rem;-o-border-radius:.15rem;border-radius:.15rem}.wrap .prize-section .prizes li .img{position:relative}.wrap .prize-section .prizes li .img span{display:block;height:.8rem;line-height:.8rem;font-size:.5rem;color:#fffaf4;position:absolute;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.3)}.wrap .prize-section .prizes li .name{margin-top:.5rem;padding:0 .5rem}</style>
</head>
<body style="visibility: hidden;">
<div class="wrap" style="display:none;">
    <div class="rule-section">
            <h3 class="title">活动规则</h3>
            <div class="deadline">截止至2018.8.15</div>
            <ul class="rules">
                <li>
                    <i></i>
                    <p></p>
                </li>
            </ul>
        </div>
    <div class="prize-section">
            <div style="padding:1px;width:100%;"></div>
            <h3 class="title">活动奖品</h3>
            <ul class="prizes" id="prizes"></ul>
        </div>
</div>
<script type="text/template" id="prizes-template">
    {{each items as item i}}
    <li>
        <div class="img">
            <img src="{{item.image}}" alt="">
            <span>{{item.alias_name}}</span>
        </div>
        <div class="name">{{item.name}}</div>
    </li>
    {{/each}}
</script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 针对uc横竖屏rem html没有重绘的问题
                var style;
                if (style = document.getElementById("forhtml")) {
                    style.parentNode.removeChild(style);
                }
                style = document.createElement("style");
                style.id = "forhtml";
                document.head.appendChild(style);
                style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
            };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
</script>
<script type="text/javascript" charset="utf-8" src="../common/lib/zepto.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/lib/zepto-adapter.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/lib/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/modal.js"></script>
<script type="text/javascript" src="../common/js/utils.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        function calcPageHeight(){
            if(document.body.clientHeight>$('.rule-section').outerHeight()+$('.prize-section').outerHeight()){
                var clientWidth = document.documentElement.clientWidth;
                $('.prize-section').height(document.body.clientHeight-$('.rule-section').outerHeight()-3.25*(20 * (clientWidth / 320)));
            }
        }
        requestActInfo('roulette',function(data){
            $('.deadline').text('截止至'+data.activity.end_at);
            $('.rules li p').eq(0).html(data.activity.description);
//            $('.rules').html(template('rules-template',data));
            $('.wrap').show();
            calcPageHeight();
        });
        requestPrizes(function(data){
            $('#prizes').html(template('prizes-template',{items:data}));
        });
    });
</script>
</body>
</html>